<template>
  <div>
    <!-- 顶部搜索 -->
    <div class="search">
      <div class="input" @click="$router.push('/search')">
        <i class="iconfont icon-search icon-positon"></i>
        <input type="text" placeholder="搜索" />
      </div>
    </div>

    <div class="content">
      <div class="content-bar">
        <van-tabs v-model="active" @click="changeTab">
          <van-tab
            class="title"
            v-for="item in titleList"
            :title="item.name"
            :key="item._id"
          >
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model="homeloading"
        :finished="homefinished"
        finished-text="没有更多了"
        @load="initArticleList"
        :immediate-check="false"
      >
        <ArticeleInfo
          v-for="item in contentList"
          :time="item.time"
          :img="item.imageSrc"
          :amcount="item.comment"
          :title="item.title"
          :key="item._id"
          :author="item.author"
          :id="item._id"
        ></ArticeleInfo>
      </van-list>
    </van-pull-refresh>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/views/Footer.vue";
import ArticeleInfo from "@/views/home/ArticeleInfo.vue";
import { getArticleListAPI } from "@/api/articleAPI.js";
// import { Toast } from "vant";

export default {
  components: {
    Footer,
    ArticeleInfo,
  },
  data() {
    return {
      skip: 0,
      limit: 10,
      isLoading: false,
      titleList: [],
      contentList: [],
      active: 0,
      homeloading: false,
      homefinished: false,
      desc: ''
    };
  },
  watch: {
    // active() {
    //   this.initArticleList();
    // },
  },
  computed: {
    cate_id() {
      let active_cate = this.titleList[this.active];
      if (!active_cate) return "";
      return active_cate._id;
    }
  },
  methods: {
    onRefresh() {
      this.skip = 0;
      this.homefinished = false;
      this.initArticleList(true);
    },
    changeTab() {
      // console.log(this.active);
      this.skip = 0;
      this.homefinished = false;
      this.initArticleList(1);
    },
    //封装获取文章列表数据的方法
    initArticleList(isRefresh) {
      let { limit, cate_id, skip } = this;
      getArticleListAPI(limit, cate_id, skip).then((result) => {
        if (result.data.code == 0) {
          // console.log(result);
          if (isRefresh) {
            this.isLoading = false;
            this.contentList = result.data.data;
          } else {
            this.contentList.push(...result.data.data);
          }
          localStorage.setItem("contentList", JSON.stringify(this.contentList));
          let len = this.contentList.length;
          if (len >= result.data.count) {
            this.homefinished = true;
          } else {
            this.homeloading = false;
            this.skip = len;
          }
        }
      });
    },
  },
  async created() {
    const res = await this.$http.post("/api/get_cate_list");
    if (res.data.code == 0) {
      this.titleList = res.data.data;
      this.initArticleList();
    }
    // let contentList = JSON.parse(localStorage.getItem("contentList"));
    // this.contentList = contentList;
  },
};
</script>

<style lang="less" scoped>
@import "@/common/change.less";

::v-deep .van-pull-refresh__track {
  margin-bottom: 70px;
  margin-top: 85px;
}
.search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  // background-color: rgb(89, 215, 89);
  background-color: @color-bgColor;
  z-index: 999;
}
.input {
  width: 280px;
  height: 30px;
  margin: 0 auto;
  input {
    color: #fff;
    border-radius: 15px;
    width: 100%;
    height: 30px;
    margin-top: 6px;
    border: none;
    background: rgb(255, 255, 255);
    text-align: center;
    font-size: 14px;
  }
  .icon-positon {
    position: absolute;
    top: 13px;
    left: 150px;
  }
}
.content {
  margin-top: 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.content-bar {
  border-bottom: 1px solid #ccc;
}

.list h4 {
  font-weight: normal;
}
</style>